<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px" style="min-height: 100vh; background-color: #002d56;">
                <div style="height: 150px; position: relative;">
                    <div style="position: absolute; top: 50%; left: 20%; color: white;">hello, user {{ user.name }}</div>
                </div>
                <div>
                    <el-menu style="background-color: #002d56; border: 1px;">
                        <el-menu-item index="1">
                            <div style="width: 100%; text-align: center; color: white;" @click="goHome">首页</div>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <div style="width: 100%; text-align: center; color: white;" @click="goReservation">我的订单</div>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <div style="width: 100%; text-align: center; color: white;" @click="goInfo">个人信息</div>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container style="background-color: #fcf5f0;">
                <el-header style="display: flex;">
                    <div style="width: 90%;"></div>
                    <div style="width: 10%; text-align: center;">
                        <el-link style="width: 100%; height: 100%;" @click="loginOut">退出</el-link>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
import { ref, onBeforeMount } from 'vue';

const user = ref({
    name: ''
})

onBeforeMount(() => {
    const userData = localStorage.getItem('admin');
    if (userData) {
        try {
            // 将json字符串解析为对象
            const parsedData = JSON.parse(userData);
            user.value.name = parsedData.name;
        } catch (error) {
            console.error('解析localStorage数据失败:', error);
        }
    }
});

const loginOut = () => {
    localStorage.removeItem('admin');
    router.push('/');
}

const goHome = () => {
    router.push('/user/userHome');
}

const goReservation = () => {
    router.push('/user/userReservation');
}

const goInfo = () => {
    router.push('/user/userInfo');
}

</script>

<style lang="less" scoped>

</style>